<template>
  <n-modal v-model:show="modalVisible">
    <div class="inner_container">
      <n-avatar :size="60" />
      <div class="button_group">
        <n-button type="error" class="handel_button" circle @click="handelReject">
          <n-icon size="20">
            <CloseSharp />
          </n-icon>
        </n-button>
        <n-button type="primary" class="handel_button" circle>
          <n-icon size="20">
            <Phone />
          </n-icon>
        </n-button>
      </div>
    </div>
  </n-modal>
</template>
<script lang="ts" setup>
import { onMounted, ref } from 'vue'
import { NModal, NIcon, NAvatar, NSpace, NButton } from 'naive-ui'
import { CloseSharp } from '@vicons/ionicons5'
import { Phone } from '@vicons/fa'
// import {installPeer} from "@/plugins/initPeer";
const modalVisible = ref(true)
const handelReject = () => {
  modalVisible.value = false
}
// onMounted(()=>{
//   installPeer(()=>{})
// })
</script>
<style scoped>
.inner_container {
  width: 100vw;
  height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-around;
}
.handel_button {
  width: 60px;
  height: 60px;
  margin: 20px;
}
.button_group {
  width: 100%;
  display: flex;
  justify-content: center;
}
</style>
